<template>
  <div class="cable-segment-distribution-container">
    <!-- 查询部分 -->
    <div class="search-filter-container">
      <div class="search-filter-area">
        <input type="text" v-model="searchSegmentName" placeholder="请输入电缆段名称" class="segment-select"/>
        <button class="search-button" @click="handleSearch">查询</button>
      </div>
    </div>

    <!-- 电缆段数据部分 -->
    <div class="segment-data-area">
      <div class="area-header">
        <h2>{{ routeLineName ? routeLineName + ' 的电缆段风险信息' : '电缆段风险信息' }}</h2>
      </div>
      <div class="area-content" style="overflow-x: auto; max-width: 100%;">
        <el-table :data="paginatedRiskData" border style="min-width: 1300px; width: 100%"
                  @row-click="handleRowClick" :row-class-name="setRowClassName">
          <el-table-column type="index" label="序号" width="80"/>
          <el-table-column prop="startPoint" label="起止点"/>
          <el-table-column prop="riskScore" label="风险评分" width="100"/>
          <el-table-column prop="riskLevel" label="风险等级" width="100">
            <template #default="{ row }">
                            <span :style="{ color: getRiskLevelColor(row.riskScore) }">
                                {{ row.riskLevel }}
                            </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <button @click="showImage(row)">查看图片</button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination" style="margin-top: 10px;">
        <el-pagination background layout="prev, pager, next" :total="filteredRiskData.length"
                       :page-size="pageSize" @current-change="handlePageChange"/>
      </div>
    </div>
  </div>

  <!-- 图片展示对话框 -->
  <el-dialog v-model="dialogVisible" title="电缆段图片" width="55%">
    <div style="display: flex; justify-content: center; align-items: center; overflow: auto;">
      <img :src="currentImageUrl" alt="电缆段图片"
           style="max-width: 100%; height: auto; transform: scale(1); transition: transform 0.2s; position: relative; "
           @wheel="handleZoom" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
           @mouseup="handleMouseUp"/>
    </div>
  </el-dialog>


</template>

<script setup>
import {ref, computed} from 'vue';
import {ElTable, ElTableColumn, ElPagination, ElDialog} from 'element-plus';
import 'element-plus/dist/index.css';
import {useRoute} from 'vue-router';
import {useRouter} from 'vue-router';

const route = useRoute();
const routeLineName = computed(() => route.query.lineName);

const searchSegmentName = ref('');
const pageSize = ref(10);
const currentPage = ref(1);

// 对话框状态和图片URL
const dialogVisible = ref(false);
const currentImageUrl = ref('');

// 示例数据，需要替换为实际从后端获取的数据
const allRiskData = ref([
  {lineName: '10kV果园线', startPoint: '果园线段1', riskScore: 96, riskLevel: '高风险'},
  {lineName: '10kV果园线', startPoint: '果园线段2', riskScore: 87, riskLevel: '高风险'},
  {lineName: '10kV果园线', startPoint: '果园线段3', riskScore: 84, riskLevel: '高风险'},
  {lineName: '10kV红氢线', startPoint: '红氢线段1', riskScore: 75, riskLevel: '中风险'},
  {lineName: '10kV红氢线', startPoint: '红氢线段2', riskScore: 68, riskLevel: '中风险'},
  {lineName: '10kV金湖线', startPoint: '金湖线段1', riskScore: 55, riskLevel: '低风险'},
]);

const filteredRiskData = computed(() => {
  let data = allRiskData.value;
  if (routeLineName.value) {
    data = data.filter(item => item.lineName === routeLineName.value);
  }
  if (searchSegmentName.value) {
    const searchTerm = searchSegmentName.value.toLowerCase();
    data = data.filter(item =>
        item.startPoint.toLowerCase().includes(searchTerm)
    );
  }
  return data;
});

const paginatedRiskData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredRiskData.value.slice(start, end);
});

const getRiskLevelColor = (score) => {
  if (score >= 90) return '#ff4d4f';
  if (score >= 80) return '#faad14';
  return '#52c41a';
};

const handleSearch = () => {
  // Filtering is reactive via computed property
  console.log('搜索的电缆段:', searchSegmentName.value);
  currentPage.value = 1; // Reset page on search
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleRowClick = (row) => {
  console.log('点击了电缆段:', row);
  // TODO: Add logic here to display the graphical information for the clicked row.
  // This might involve navigating to a new route or opening a modal.
};

const showImage = (row) => {
  console.log('点击了查看图片按钮:', row);
  // TODO: Add logic here to display the image for the clicked row.
  // This might involve opening a modal or navigating to a new page with the image.
  // For demonstration, let's use a placeholder image URL
  currentImageUrl.value = '/pictures/dianlanduan1.png';
  dialogVisible.value = true;
};

const setRowClassName = ({row, rowIndex}) => {
  if (row.riskLevel === '高风险') {
    return 'high-risk-row';
  }
  return '';
};

const router = useRouter();

const zoomLevel = ref(1);

const handleZoom = (event) => {
  event.preventDefault();
  const scaleAmount = 0.1;
  if (event.deltaY < 0) {
    zoomLevel.value += scaleAmount;
  } else {
    zoomLevel.value = Math.max(1, zoomLevel.value - scaleAmount);
  }
  const imgElement = event.target;
  imgElement.style.transform = `scale(${zoomLevel.value})`;
};

const isDragging = ref(false);
const dragStart = ref({x: 0, y: 0});
const imagePosition = ref({x: 0, y: 0});

const handleMouseDown = (event) => {
  isDragging.value = true;
  dragStart.value = {x: event.clientX, y: event.clientY};
};

const handleMouseMove = (event) => {
  if (!isDragging.value) return;
  const deltaX = event.clientX - dragStart.value.x;
  const deltaY = event.clientY - dragStart.value.y;
  imagePosition.value.x += deltaX;
  imagePosition.value.y += deltaY;
  dragStart.value = {x: event.clientX, y: event.clientY};
  const imgElement = event.target;
  imgElement.style.left = imagePosition.value.x + 'px';
  imgElement.style.top = imagePosition.value.y + 'px';
};

const handleMouseUp = () => {
  isDragging.value = false;
};

function handleExit() {
  router.push('/dashboard');
}
</script>

<style scoped>
.cable-segment-distribution-container {
  min-width: 100px !important;
  overflow-x: auto !important;
  display: block !important;
  padding: 20px;
  background-color: #e8f5e9;
  /* 使用国网绿相近的浅绿色 */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-filter-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-filter-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.segment-select {
  padding: 8px;
  border: 1px solid #00914D !important;
  border-radius: 4px;
  flex-grow: 1;
}

.search-button {
  padding: 8px 15px;
  background-color: #00914D;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.segment-data-area {
  flex-grow: 1;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.area-header h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.area-content {
  flex-grow: 1;
  overflow-x: auto !important;
  display: block;
}

.el-table {
  min-width: 1000px !important;
  padding: 10px 0;
}

.el-table th {
  background-color: #00914D;
  color: #333;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 4px rgba(91, 205, 203, 0.1);
}

.el-table .high-risk-row {
  background-color: #fff0f0;
  /* Light red background */
  font-weight: bold;
}
</style>